<%--
  Created by IntelliJ IDEA.
  User: ？
  Date: 2021/11/9
  Time: 10:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="js/jquery-3.6.0.min.js"></script>
    <script>

        $(function () {

            initProvince()
            setCity();

        })

        function setCity() {

            $("#provinceSel").change(function () {

                let url = "${pageContext.request.contextPath}/provinceServlet"

                let params = {
                    "method":"findPid",
                    "pid":$(this).val()

                }

                let callback = function (rel) {
                    console.log(rel)
                    $("#citySel").html("")


                    $("#citySel").append("<option value=''>----请选择城市----</option>")


                    $(rel).each(function (index,ele) {

                        $("#citySel").append("<option value='"+ele.cid+"'> "+ele.cname+"</option>")
                    })

                }


                $.post(url,params,callback,"json")


            })


        }

        function initProvince() {

            let url = "${pageContext.request.contextPath}/provinceServlet"

            let params = {

                "method":"findP"
            }

            let callback = function (rel) {
                console.log(rel)

                //获取省份下拉菜单
                $("#provinceSel").html("")


                $("#provinceSel").append("<option value=''>----请选择省份----</option>")


                $(rel).each(function (index,ele) {

                    $("#provinceSel").append("<option value='"+ele.pid+"'> "+ele.pname+"</option>")
                })
            }

            $.post(url,params,callback,"json")

        }






    </script>
</head>
<body>
省份:
<select name="" id="provinceSel">

    <option value=''>----请选择省份----</option>
</select>

城市:
<select name="" id="citySel">
    <option value="">----请选择城市----</option>
</select>

</body>
</html>
